<template>
    <div class="body">
    <h1>个人中心</h1>
    <el-form label-position="right" label-width="80px" :model="user" class="form">
   
        <el-form-item label="学号">
            <el-input :disabled="disabled" v-model="user.username"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
            <el-input :disabled="disabled" v-model="user.name"></el-input>
        </el-form-item>
        <el-form-item label="性别">
            
    <el-select style="width:100%" v-model="user.gender" placeholder="请选择性别">
      <el-option label="男" :value="1"></el-option>
      <el-option label="女" :value="0"></el-option>
    </el-select>

         
        </el-form-item>
        <el-form-item label="角色">
        <el-select  :disabled="disabled" v-model="user.roles" multiple placeholder="请选择" style="width: 100%">
              <el-option v-for="item in roles" :key="item.id" :label="item.comment" :value="item.id"></el-option>
            </el-select>
        </el-form-item>
    </el-form>
  </div>
        </template>

<script>
import {getUserInfo} from "@/api/login"
import request from "@/utils/request";
export default{
    data(){
        return {
            disabled:true,
            roles:[],
            user:{
            // username:"2200022781",
            // gender:0,
            // name:"小文"
        }
        }
    },
    mounted(){
        request.get("/role/all").then(resp => {
          this.roles = resp.data
        })
        getUserInfo().then(res=>{
            this.user=res.data;
        })
    }
}
</script>

<style class="body">
.form{
    width:75%;
   margin: auto;
}
.body{
    margin:2% 10%;
}
.avatar{
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background-color: red;
}
</style>